<template>
  <div class="do page">
    <cube-scroll>
    <my-header :date="todo.date" :title="todo.title"></my-header>
    <div class="acts" v-if="this.index!=this.max">
      <location @locate="setAddressTime" v-model="act.address"></location>
      <span class="set-time" v-if="act.addressTime">{{act.addressTime}}</span>
      <image-upload @click.native="setActTime" v-model="act.actImg" class="plane image-upload" title="活动现场(必填)" icon="iconhuodong1"></image-upload>
      <span class="set-time" v-if="act.actTime">{{act.actTime}}</span>
      <text-area title="活动记录(必填)" class="plane summary" icon="iconzongjie" info="描述活动相关内容" v-model="act.actInfo"></text-area>
    </div>

    <div class="sum" v-else>
      <select-num  :alias="alias" :options="goodsList" :items="items" label="物料"  icon="iconwuliaoguanli"></select-num>
      <div class="nums">
        <div class="bd">
          <label-num v-model="todo.sellNum" label="销售数量(必填)" class="ln" icon="iconic_saleperformance" desc="盒">
          </label-num>
          <label-num :readonly="true" v-if="todo.status!=0" label="新增会员" v-model="todo.userNum" class="ln" icon="iconxiaoshouguanli" desc="个">
          </label-num>
        </div>
      </div>

      <image-upload  @click.native="setSellImgTime" v-model="todo.sellImg" class="plane image-upload" title="销售照片(必填)" icon="iconhuodong1"></image-upload>
      <span class="set-time" v-if="todo.sellTime">{{todo.sellTime}}</span>
      <text-area title="活动总结(必填)" v-model="todo.summary" icon="iconzongjie" info="填写此次活动的总结" class="plane"></text-area>
    </div>

    <div class="btns">
      <div class="left">
        <span @click="last" class="last border-right-1px">上一步</span>
        <span class="week">{{strs[index]}}</span>
        <span @click="next" class="next border-left-1px">下一步</span>
      </div>
      <div class="add" @click="confirm()" v-if="isMe">
        <span v-if="canEdit">提交</span>
        <span  v-else>已提交</span>
      </div>
    </div>
    </cube-scroll>
  </div>
</template>

<script>
import location from '../../../components/form/location'
import imageUpload from '../../../components/form/image-upload'
import textArea from '../../../components/form/text-area'
import myHeader from '../../../components/header'
import { get, confirmAct, confirmActSum } from '../../../api/todo'
import { showError } from '../../../toast'
import { showCorrect } from '../../../dialog'
import selectNum from '../../../components/form/select-num'
import labelNum from '../../../components/form/label-num'
import { list } from '../../../api/goods'
import { isSameDay, parseTime } from '@/util/time'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      max: 6,
      items: [{}],
      act: {
        address: null,
        addressTime: null,
        actInfo: null,
        actImg: null,
        actTime: null
      },
      acts: [{}],
      pos: 0,
      alias: {
        value: 'id',
        text: 'name'
      },
      goodsList: [

      ],
      strs: ['第一次', '第二次', '第三次', '第四次', '第五次', '第六次', '总结'],
      todo: {
        date: '',
        title: '',
        sellNum: null,
        userNum: null,
        sellImg: null,
        sellTime: null
      }
    }
  },
  methods: {
    setAddressTime () {
      if (!this.act.address) {
        this.$set(this.act, 'addressTime', parseTime(new Date()))
        this.act.addressTime = parseTime(new Date())
      }
    },
    setSellImgTime () {
      if (!this.todo.sellImg) {
        this.todo.sellTime = parseTime(new Date())
      }
    },
    setActTime () {
      if (!this.act.actImg) {
        this.$set(this.act, 'actTime', parseTime(new Date()))
        this.act.actTime = parseTime(new Date())
      }
    },
    changeAct () {
      if (this.acts && this.index < this.acts.length) {
        this.act = this.acts[this.index]
      } else {
        this.act = {}
      }
    },
    next () {
      // 不能超过最大活动
      if (this.index < this.max && this.index < this.acts.length) {
        this.pos++
      }
    },
    last () {
      if (this.index > 0) {
        this.pos--
      }
    },
    validateAct () {
      return new Promise((resolve, reject) => {
        if (this.act.id) {
          showError('请勿重复提交!')
          return
        }
        // if (!this.act.actInfo || this.actInfo === '') {
        //   showError('请完整填写!')
        //   return
        // }
        // if (!this.act.actImg || this.actImg === '') {
        //   showError('请完整填写!')
        //   return
        // }
        resolve('ok')
      })
    },
    confirm () {
      // 提交总结
      if (this.index === this.max) {
        const ids = this.items.map(item => {
          return item.value
        })
        const nums = this.items.map(item => {
          return item.number
        })
        confirmActSum(this.todoId, this.todo, ids, nums).then(res => {
          showCorrect('提交成功!').then(res => {
            this.$router.back()
          })
        })
      } else { // 提交活动
        this.validateAct().then(res => {
          confirmAct(this.todoId, this.act).then(res => {
            this.act = res.data
            let text = '提交成功!'
            if (this.index === this.max - 1) {
              text += '请立即填写总结!'
            } else {
              text += '稍后继续打卡'
            }
            showCorrect(text).then(res => {
              // 最后一次活动提交  直接进入总结
              if (this.index === this.max - 1) {
                this.pos++
              } else {
                this.$router.back()
              }
            })
          })
        })
      }
    }
  },
  created () {
    this.todoId = this.$route.query.id
    // 获取日程信息
    get(this.todoId).then(res => {
      this.todo = res.data
      // 活动
      if (res.extra.acts) {
        this.acts = res.extra.acts
      }
      // 物料
      const records = res.extra.records
      if (records && records.length !== 0) {
        this.items = records.map(res => {
          return {
            value: res.goodsId,
            text: res.goodsName,
            number: res.number
          }
        })
      }
    })
    // 获取物料信息
    list().then(res => {
      this.goodsList = res.data
    })
  },
  computed: {
    canEdit () {
      return this.isMe && !this.act.id && this.todo.status == 0 && isSameDay(this.todo.date, new Date())
    },
    isMe () {
      if (!this.todo.id || this.userId === this.todo.userId) {
        return true
      }
      return false
    },
    ...mapState({
      userId: state => state.user.id
    }),
    index () {
      let idx = 0
      if (this.acts && this.acts.length > 0) {
        idx = this.acts.length
      }
      return idx + this.pos
    }
  },
  watch: {
    index () {
      this.changeAct()
    }
  },
  components: {
    location, imageUpload, textArea, myHeader, selectNum, labelNum
  }
}
</script>

<style scoped lang="stylus">
  .set-time
    font-size 11px
    color #B9B7C0
    line-height 11px
    margin-left 10px
    display block
    margin-top 10px
    margin-bottom 0
  .do
    background-color #F5F4F7
    overflow scroll
    .title
      display flex
      align-items center
      justify-content space-between
      padding 20px 10px 0 10px
      font-weight 500
      dpr-font(16px)
      color:rgba(26,26,48,1);
      margin-bottom 22px
      .date
        color #55545D
  .plane
    margin-top 15px
  .sum
    .nums
      padding 0 5px
      .bd
        margin-top 15px
        background:rgba(255,255,255,1);
        box-shadow:0px 3px 7px 0px rgba(89,88,87,0.52);
        .ln
          border-bottom 1px solid #ECEAEA
          &:last-child
            border none
  .btns
    margin-bottom 40px
    margin-top 34px
    display flex
    justify-content space-around
    .left
      flex 1
      height:44px;
      background:rgba(0,156,78,1);
      box-shadow:0px 3px 7px 0px rgba(1,117,59,0.52);
      border-radius:15px;
      display flex
      align-items center
      justify-content space-between
      .last,.next
        display flex
        align-items center
        justify-content center
        width 96px
        height 20px
        dpr-font(14px)
        font-weight:300;
        color:rgba(245,244,247,1);
      .last
        border-right-color #B9B7C0
      .next
        border-left-color #B9B7C0
      .week
        display flex
        align-items center
        justify-content center
        font-size:10px;
        font-weight:300;
        color:rgba(236,234,234,1);
    .add
      margin-left 10px
      width:106px;
      height:44px;
      background:rgba(89,142,254,1);
      box-shadow:0px 3px 7px 0px rgba(25,86,216,0.52);
      border-radius:15px;
      dpr-font(14px)
      font-family:PingFang SC;
      font-weight:300;
      color:rgba(236,234,234,1);
      display flex
      align-items center
      justify-content center
</style>
